<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave"
      @leave="leave" @after-leave="afterLeave" :css="false" name="js-slide">
      <div v-if="show" class="content">
        Content with JS hooks...
      </div>
    </transition>
  </div>
</template>
<script>
import Velocity from "velocity-animate"
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    beforeEnter(el) {
      el.style.transform = 'translateX(100%)';
    },
    enter(el, done) {
      Velocity(el, { translateX: '0%' }, { duration: 500, easing: 'ease-in-out', complete: done });
    },
    afterEnter(el) {
      //可选
    },
    beforeLeave(el) {
      el.style.transform = 'translateX(0%)';
    },
    leave(el, done) {
      Velocity(el, { translateX: '100%' }, { duration: 500, easing: 'ease-in-out', complete: done });
    },
    afterLeave(el) {
      //可选
    }
  }
}
</script>
<style scoped>
.content {
  width: 300px;
  height: 200px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
</style>